<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片切换</title>
		<style>
			#nav {
				/* div居中 */
				margin: 0 auto;
				position: relative;
				border: 2px solid green;
				width: 500px;
				height: 600px;
			}
			#nav #menu{
				position: absolute;
				right: 50px;
				bottom: 20px;
			}
			#nav #menu li{
				list-style: none;
				float: left;
				background-color: blue;
				height: 15px;
				width: 15px;
				margin-left: 5px;
				border-radius: 50%;
			}
			#nav #menu li:hover{
				background-color: white;
				cursor: pointer;
			}
			.clear:after{
				display: block;
				height: 0;
				content: '';
				clear: both;
			}
		</style>
	</head>
	<body>
		<div id="nav">
			<img src="../images/kongzi.jpg" width="500px" height="600px"/>
			<ul id="menu" class="clear">
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li> 
			</ul>
		</div>
	</body>
</html>
